<template>
    <table border="1">
        <thead>
            <tr>
                <th v-for="(item, index) in tableHeader" :key="index">{{ item.title }}</th>

            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in TableBody" :key="index">
                <td>{{ item.exceptMessageCn }}</td>
                <!-- <td>{{ item.currentDate + ' ' + item.workforceShiftName }}</td> -->
                <td>{{ item.startDatetime }}</td>
                <td>{{ item.updateTime }}</td>
                <td>{{ item.hasClockin == TODO ? '未解决' : '已解决' }}</td>
                <td>{{ item.updateBy }}</td>

            </tr>
        </tbody>
    </table>
</template>
<script>
export default {
    props: ['tableHeader', 'TableBody'],
    data() {
        return {

        }
    },

    methods: {


    },
}
</script>
<style lang="less" scoped>
.el-pagination {

    .btn-next,
    .btn-prev {
        border: 0px !important;
    }

}

table {
    width: 100%;
    background: linear-gradient(60deg, #021130 0%, #010D2A 100%);
    opacity: 1;
    border: 1px solid #00469C;
    border-collapse: collapse;
    font-size: 10px;

    thead {
        width: 1572px;
        color: white;

        tr {

            height: 40px;
            background: #052b56;
            text-align: center;
            color: white;
            font-size: 10px;
            opacity: 0.9;

            th {
                color: white;
                text-align: center;
                width: 10%;

            }
        }

    }

    tbody {
        width: 1572px;
        color: white;

        tr {
            border: 1px solid #00469C;
            height: 40px !important;

            td {
                color: white;
                text-align: center;
                font-size: 16px;


                span {
                    display: inline-block;
                    padding: 10px;
                    line-height: 40px;
                }

            }
        }

        tr:nth-child(even) {
            background: rgba(25, 112, 219, 0.1);

            td {
                color: white;
            }
        }

    }

}

.look_play {
    display: flex;
    align-items: center;
    border: 0px;
    position: relative;
    line-height: 58px;

    .solcingMask {
        width: 465px;
        height: 188px;
        overflow: auto;
        box-shadow: 10px 7px 32px 7px #011A41;
        position: absolute;
        top: 50px;
        left: 0px;
        z-index: 1000;
        background: linear-gradient(360deg, #021130 0%, #010D2A 100%);
        opacity: 1;
        border: 1px solid #00469C;

        div {
            width: 100%;
            height: 40px;

        }

    }

    .left {
        flex: 1;
        font-size: 16px;
        display: flex;

        img {
            width: 16px;
            height: 11px;
            margin: 10px 5px 3px 20px;
        }
    }

    .right {
        cursor: pointer;

        img {
            width: 19.44px;
            margin: -4px 10px;

        }
    }
}

.casdf {
    cursor: pointer;

}
</style>